<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Products Grid Left Sidebar</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
<link
	href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap"
	rel="stylesheet">
<link
	href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i&display=swap"
	rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/chosen.min.css">
<link rel="stylesheet" href="css/pe-icon-7-stroke.css">
<link rel="stylesheet" href="css/magnific-popup.min.css">
<link rel="stylesheet" href="css/lightbox.min.css">
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css">
<link rel="stylesheet" href="css/jquery.scrollbar.min.css">
<link rel="stylesheet" href="css/mobile-menu.css">
<link rel="stylesheet" href="fonts/flaticon/flaticon.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.plugin-countdown.min.js"></script>
<script src="js/jquery-countdown.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/isotope.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/mobile-menu.js"></script>
<script src="js/chosen.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/jquery.elevateZoom.min.js"></script>
<script src="js/jquery.actual.min.js"></script>
<script src="js/fancybox/source/jquery.fancybox.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/owl.thumbs.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src='https://ditu.google.cn/maps/api/js?key=AIzaSyC3nDHy1dARR-Pa_2jjPCjvsOR4bcILYsM'></script>
<script src="js/frontend-plugin.js"></script>
</head>
<body class="productsgrid-page">

	<!-- 引入头部导航栏 -->
	<jsp:include page="top.jsp"></jsp:include>

	<div class="main-content main-content-product left-sidebar">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<div class="breadcrumb-trail breadcrumbs">
						<ul class="trail-items breadcrumb">
							<li class="trail-item trail-begin"><a href="index.jsp">首页</a>
							</li>
							<li class="trail-item trail-end active"><a href="index.jsp">商城</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="row">
				<div
					class="content-area shop-grid-content no-banner col-lg-9 col-md-9 col-sm-12 col-xs-12">
					<div class="site-main">
						<h3 class="custom_blog_title">商城</h3>

						<ul class="row list-products auto-clear equal-container product-grid" id="product">
						
						</ul>
						<div class="pagination clearfix style3">
							<div class="nav-link">
								<a href="#" class="page-numbers"><i
									class="icon fa fa-angle-left" aria-hidden="true"></i></a> <a
									href="#" class="page-numbers">1</a> <a href="#"
									class="page-numbers">2</a> <a href="#"
									class="page-numbers current">3</a> <a href="#"
									class="page-numbers"><i class="icon fa fa-angle-right"
									aria-hidden="true"></i></a>
							</div>
						</div>
					</div>
				</div>
				<div class="sidebar col-lg-3 col-md-3 col-sm-12 col-xs-12">
					<div class="wrapper-sidebar shop-sidebar">
						<div class="widget woof_Widget">
							<div class="widget widget-categories">
								<h3 class="widgettitle">类别</h3>
								<ul class="list-categories" id="pdtClass">
									
									
								</ul>
							</div>
							<div class="widget widget_filter_price">
								<h4 class="widgettitle">价格</h4>
								<div class="price-slider-wrapper">
									<div data-label-reasult="Range:" data-min="0" data-max="3000"
										data-unit="$" class="slider-range-price " data-value-min="0"
										data-value-max="1000"></div>
									<div class="price-slider-amount">
										<span class="from">$45</span> <span class="to">$215</span>
									</div>
								</div>
							</div>
							
							<div class="widget widget-tags">
								<h3 class="widgettitle">热门标签</h3>
								<ul class="tagcloud">
									<li class="tag-cloud-link"><a href="#">杂色</a></li>
									<li class="tag-cloud-link"><a href="#">仙人掌</a></li>
									<li class="tag-cloud-link"><a href="#">开花</a></li>
									<li class="tag-cloud-link active"><a href="#">辅料</a></li>
									<li class="tag-cloud-link"><a href="#">热带植物</a></li>
									<li class="tag-cloud-link"><a href="#">蕨类植物</a></li>
								</ul>
							</div>
						</div>
						<div class="widget newsletter-widget">
							<div class="newsletter-form-wrap ">
								<h3 class="title">订阅我们的时事通讯</h3>
								<div class="subtitle">更多的特别优惠，活动和促销</div>
								<input type="email" class="email" placeholder="您的电子邮件">
								<button type="submit" class="button submit-newsletter">订阅</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

<!-- 引入页脚栏 -->
	<jsp:include page="footer.jsp"></jsp:include>
	<script type="text/javascript">
	//获取产品
	$.post("http://localhost:8080/Greenleaf/product/getAll",
			function(res) {
			  if (res!=null) {
				  document.getElementById("product").innerHTML="";
				 var html = "";
				$.each(res.data,function(index, item) {
					html+='<li class="product-item  col-lg-4 col-md-6 col-sm-6 col-xs-6 col-ts-12 style-1"><div class="product-inner equal-element">'
					+'<div class="product-top">'
					+'</div>'
					+'<div class="product-thumb">'
					+'	<div class="thumb-inner">'
					+'		<a href="productdetails-fullwidth.jsp?pdtId='+item.pdtId+'"> <img src="'+item.pdtImg+'"'
					+'			alt="img">'
					+'		</a>'
					+'		<div class="thumb-group">'
					+'			<div class="yith-wcwl-add-to-wishlist">'
					+'				<div class="yith-wcwl-add-button">'
					+'					<a href="#">添加到我的收藏</a>'
					+'				</div>'
					+'			</div>'
					+'			<a href="productdetails-fullwidth.jsp?pdtId='+item.pdtId+'" class="button quick-wiew-button">查看详情</a>'
					+'			<div class="loop-form-add-to-cart">'
					+'				<button onclick="shopping('+item.pdtId+')" class="single_add_to_cart_button button">添加到我的购物车</button>'
					+'			</div>'
					+'		</div>'
					+'	</div>'
					+'</div>'
					+'<div class="product-info">'
					+'	<h5 class="product-name product_title">'
					+'		<a href="#">'+item.pdtName+'</a>'
					+'	</h5>'
					+'	<div class="group-info">'
					+'		<div class="stars-rating">'
					+'			<div class="star-rating">'
					+'				<span class="star-'+item.discount+'"></span>'
					+'			</div>'
					+'			<div class="count-star">('+item.discount+')</div>'
					+'		</div>'
					+'		<div class="price"><ins>'+item.price+' </ins></div>'
					+'	</div>'
					+'</div>'
					+'</div></li>'
					document.getElementById("product").innerHTML=html;
				});
			} else {
				$("#sort").append(new Option("暂无数据", ""));
			}
			 
		}, "json");
	//获取产品类别
	$.post("http://localhost:8080/Greenleaf/pdtClass/getAll",
			function(res) {
			  if (res!=null) {
				  document.getElementById("pdtClass").innerHTML="";
				 var html = "";
				$.each(res.data,function(index, item) {
					html+='<li><input type="checkbox" id="cb1"> <label for="cb1" class="label-text"> '+item.className+' </label></li>'
				
					document.getElementById("pdtClass").innerHTML=html;
				});
			} else {
				$("#sort").append(new Option("暂无数据", ""));
			}
			 
		}, "json");
	function shopping(pdtId){
		window.location.href="productdetails-fullwidth.jsp?pdtId="+pdtId;
	}
	</script>


</body>

</html>